function canvasDrawing(info: any, canvas: any, type: string, toggleDrawBtn: any) {
    console.log(canvas);
    // 初始化 Canvas
    const ctx = canvas.getContext('2d');
    canvas.width = 560;
    canvas.height = 300;
    // 绘制相关变量
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let drawMode = false; // 绘制模式开关，默认关闭
    // 切换绘制模式的按钮
    // const toggleDrawBtn = document.getElementById('toggleDrawBtn');
    if (type == 'toggleDrawBtn') {
        drawMode = !drawMode;
        // toggleDrawBtn.addEventListener('click', () => {
        //     drawMode = !drawMode;
        //     toggleDrawBtn.textContent = drawMode ? '禁用绘制' : '启用绘制';
        //     toggleDrawBtn.classList.toggle('active', drawMode);
        //     canvas.style.cursor = drawMode ? 'crosshair' : 'default';
        // });
        // 绘制逻辑，只有 drawMode 为 true 时才允许绘制
        canvas.addEventListener('mousedown', (e: any) => {
            if (!drawMode) return;
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });

        canvas.addEventListener('mousemove', (e: any) => {
            if (!drawMode || !isDrawing) return;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 2;
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        canvas.addEventListener('mouseout', () => {
            isDrawing = false;
        });
    }

    // 保存到服务器
    // if (type == 'saveBtn') {
    //     const imageData = canvas.toDataURL('image/png');
    //     fetch('/upload', {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json'
    //         },
    //         body: JSON.stringify({ image: imageData })
    //     })
    //         .then(response => response.json())
    //         .then(data => {
    //             console.log('上传成功:', data);
    //             alert('图像已保存到服务器');
    //         })
    //         .catch(error => {
    //             console.error('上传失败:', error);
    //             alert('上传失败');
    //         });
    // }

    // 清除画布
    if (type == 'clearBtn') {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}
export default canvasDrawing;
